<template>

  <base-content>
   <div class="container q-pa-lg q-col-gutter-md main">
    <q-breadcrumbs class="text-grey" active-color="purple">
      <template v-slot:separator>
        <q-icon
          size="1.2em"
          name="arrow_forward"
          color="purple"
        />
      </template>

      <q-breadcrumbs-el label="首页" icon="home"  to="/"/>
      <q-breadcrumbs-el label="放射科" icon="widgets" />
      <q-breadcrumbs-el label="科室概览" icon="navigation" />
    </q-breadcrumbs>

   
  <div class="one">
       <!-- 第一个echarts -->
   <div class="char">
       <div class="title">
           昨日工作站统计
           </div>
<div style="height: 30rem;width: 100%">
                  <v-chart :options="flow1"  v-if="flow1Show" autoresize />
                </div>
                 </div>
 <!-- 第一个echarts -->

   <div class="table1">
        <div class="title">
           设备状态
           </div>

        <div class="table">
            <tables :data="data" :columns="columns" v-if="data.length>0">    

    </tables>
        </div>

   </div>
  </div>


    <div class="one">
       <!-- 第一个echarts -->
   <div class="char">
       <div class="title">
           昨日工作站统计
           </div>
<div style="height: 30rem;width: 100%">
                  <v-chart :options="flow1"  v-if="flow1Show" autoresize />
                </div>
                 </div>
 <!-- 第一个echarts -->

   <div class="table1">
        <div class="title">
           设备状态
           </div>

        <div class="table">
            <tables :data="data" :columns="columns" v-if="data.length>0">    

    </tables>
        </div>

   </div>
  </div>

    

     <div class="one" >
       <!-- 第一个echarts -->
   <div class="char">
       <div class="title">
           昨日工作站统计
           </div>
<div style="height: 30rem;width: 100%">
                  <v-chart :options="flow1"  v-if="flow1Show"
                  autoresize />
                </div>
                 </div>
 <!-- 第一个echarts -->

   <div class="table1">
        <div class="title">
           设备状态
           </div>

        <div class="table">
            <tables :data="data" :columns="columns" v-if="data.length>0">    

    </tables>
        </div>

   </div>
  </div>


<div style="height:2rem"></div>



   </div>
  </base-content>

</template>

<script>

// import countTo from 'vue-count-to'
import BaseContent from '../../components/BaseContent/BaseContent'
// import { thumbStyle } from 'components/BaseContent/ThumbStyle'
// import chartPie from '../../assets/js/echarts-1'
// import charts2Option from '../../assets/js/echarts-2'
import { income, expense, total } from '../../assets/js/echarts-3'
// import chartZ from '../../assets/js/echarts-4'

import { getList } from '../../axios/AxiosConfig.js'

import tables from '../../components/table.vue'

import  {flow1}  from '../../utils/echarts/gailan/flow1'

export default {
  name: 'gailan',
  components: {
    BaseContent,
    tables,
    // countTo
  },
 
  data () {
    return {
        income,
     flow1:'',
     flow1Show:false,
     data:[],
      columns:[
      {name:'name',field:'name',label:'名字'},
      {name:'time',field:'time',label:'时间'},
      {name:'show',field:'show',label:'节目'},
      {name:'pdf',field:'handle',label:'pdf'},

    ]

    }
  },
  
  mounted(){
      console.log(flow1);
    this.$nextTick(()=>{
        this.flow1 = flow1
        this.flow1Show = true
    })
  
  },
  methods: {
    
  },
  created(){
      getList().then(res=>{
       console.log('res',res);
       this.data = res.data
       this.data.forEach((i,v)=>{
        //  i.name = 'lanshi'+ v;
         (v%2 == 0)?i.flag = true: i.flag = false
         i.handle = '查看报告'
       })
     }).catch(err=>{
       console.log(err);
     })

  }
}
</script>
<style lang="less" scoped>
 
.main{
    width: 100%;
    height: 100%;
    padding-top: 2rem;
   
  .one{
    margin-top: 1%;
      display: flex;
      padding: 0 2%;
      width: 100%;
      justify-content: space-between;
       .char{
       width: 45%;
       height: 35rem;
       border: 1px solid #000;
       .title{
           width: 100%;
           height: 4rem;
           background-color: #000;
           color: #fff;
           text-align: center;
           line-height: 4rem;
           font-size: 2rem;
       }
   }
   
   .table1{
        width: 45%;
       height: 35rem;
       border: 1px solid yellow;
        .title{
           width: 950px;
           width: 100%;
           height: 4rem;
           background-color: yellow;
           color: #fff;
           text-align: center;
           line-height: 4rem;
           font-size: 2rem;
       }
       .table{
           width: 100%;
           height: 30rem;
       }
   }
  }
    
}





</style>
